<template>
  <div class="home">
    <el-container style="height: 100vh;">
      <el-aside width="210px" style="background-color: #001529;overflow-x:hidden">
          <h1 style="height:60px;line-height:60px;text-align:center;font-size: 18px;color:#fff;">后台管理</h1>
        <el-menu 
        :default-active="$route.path"
        text-color="#999"
        active-text-color="#fff"
        :router='true'
        :unique-opened="true"
        background-color="#001529">
          <el-submenu style="width:210px;" :index="''+(index+1)" v-for="(item, index) in menuLists" :key="index">
            <template slot="title">
              <i class="el-icon-user" v-if="item.authName==='用户管理'"></i>
              <i class="el-icon-menu" v-if="item.authName==='权限管理'"></i>
              <i class="el-icon-goods" v-if="item.authName==='商品管理'"></i>
              <i class="el-icon-s-order" v-if="item.authName==='订单管理'"></i>
              <i class="el-icon-s-promotion" v-if="item.authName==='数据统计'"></i>
              {{item.authName}}
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="(_item, _index) in item.children" :index=" '/home/' + _item.path" :key="_index">{{_item.authName}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{$store.state.userName}}</span>
        </el-header>
        <el-main style="background:#f5f7f9;display:flex">
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
.el-header {
  background-color: #fff;
  color: #333;
  line-height: 60px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  data() {
    return {
      menuLists: []
    };
  },
  methods: {
      //获取权限菜单列表
      getMenus() {
          this.$http('menus')
          .then(res => {
              this.menuLists = res.data
          })
      },
      //退出方法
      logOut() {
          localStorage.removeItem('token')
          localStorage.removeItem('userName')
          this.$store.commit('setToken', '')
          this.$store.commit('setUserName', '')
          this.$message({
            message: '退出成功',
            type: 'success'
          })
          this.$router.push({
              name: 'login'
          })
      }
  },
  created() {
      this.getMenus()
  }
};
</script>